<template>
    <div class="start-detail">
        <el-main>
            <div class="detail-header">
                <p>{{ startName }}</p>
                <router-link to="/home/start-page" tag="div" style="cursor: pointer;">返回</router-link>
            </div>
            <div class="detail-form">
                <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="100px">
                    <div class="form-left">
                        <el-form-item label="名称:" prop="name">
                            <el-input v-model="detailForm.name"></el-input>
                        </el-form-item>

                        <el-form-item label="描述:">
                            <el-input v-model="detailForm.describe"></el-input>
                        </el-form-item>

                        <el-form-item label="播放时长:" prop="duration">
                            <el-select v-model="detailForm.duration" placeholder="请选择播放时长">
                                <el-option label="1s" value="1"></el-option>
                                <el-option label="2s" value="2"></el-option>
                                <el-option label="3s" value="3"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="跳转链接:">
                            <!-- 点击自定义，弹出输入框，拿到输入框的值作为select的值 -->
                            <!-- <el-select v-model="detailForm.link" placeholder="设置跳转链接" @change="custom(detailForm.link)">
                                <el-option value="无"></el-option>
                                <el-option value="自定义"></el-option>
                            </el-select> -->
                            <el-input v-model="detailForm.link" placeholder="设置跳转链接"></el-input>
                        </el-form-item>

                        <el-form-item label="上线时间:" prop="timeRange">
                            <el-date-picker
                                v-model="detailForm.timeRange"
                                type="datetimerange"
                                range-separator="-"
                                @change="selectDate"
                                :picker-options="pickerOptions"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                >
                            </el-date-picker>
                        </el-form-item>
                    
                        <el-form-item class="btnGrounp">
                            <el-button style="background: #4065E0; color: #ffffff" class="detail-btn" @click="defineSetting('detailForm')">确定</el-button>
                            
                            <el-link :underline="false" @click="cancelSetting">取消</el-link>
                            
                        </el-form-item>
                    </div>
                    <div class="form-right">
                        <el-form-item prop="imgUrl" ref="imgValidate">
                            <el-upload
                                class="upload"
                                :class="{ isHide: hideUpload }"
                                action=""
                                list-type="picture-card"
                                :on-remove="handleRemove"
                                :on-change="imgPreview"
                                :auto-upload="true"
                                :file-list="fileList"
                                :accept="'image/*'"
                                :limit="limitCount"
                                :http-request="handUpload">
                                <!-- <img :src="detailForm.imgUrl" alt="" srcset="" class="avatar"> -->
                                <i>点这里上传</i>
                            </el-upload>
                            <p class="size"> 750px * 1920px </p>
                        </el-form-item>
                    </div>
                    
                </el-form>
            </div>
            <!-- <div>
                <el-dialog
                title="跳转链接"
                :visible.sync="linkDialog"
                width="30%"
                :modal-append-to-body="false"
                :center="true"
                >
                    <el-input v-model="linkValue" placeholder="请输入内容"></el-input>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="linkDialog = false">取 消</el-button>
                        <el-button type="primary" @click="defineLinkDialog">确 定</el-button>
                    </span>
                </el-dialog>
            </div> -->
        </el-main>
    </div>
    
</template>

<script>
import { editStartup, upload } from 'api/content/startupController'
export default {
    name: 'Detail',
    data() {
        return {
            startupId: this.$route.query.row.startupId,
            startTime: new Date(parseInt(this.$route.query.row.startTime)),
            endTime: new Date(parseInt(this.$route.query.row.endTime)),
            detailForm: {
                name: this.$route.query.row.name,
                describe: this.$route.query.row.description,
                duration: this.$route.query.row.playSeconds + 's',
                link: this.$route.query.row.url,
                timeRange: [],  // 起始时间和结束时间
                imgUrl: this.$route.query.row.image
            },
            rules: {
                name: [
                    { required: true, message: "请输入启动页名称", trigger: 'blur' }
                ],
                duration: [
                    { required: true, message: "请选择播放时长", trigger: 'blur' }
                ],
                timeRange: [
                    { required: true, message: "请设置启用时间", trigger: 'blur' }
                ],
                imgUrl: [
                    { required: true, message: '请选择启动页图片', trigger: 'change' }
                ]
            },
            fileList: [{ url: this.$route.query.row.image }],
            hideUpload: true,
            limitCount: 1,  // 上传图片限制为1
            pickerOptions: {
                disabledDate(time){
                    return time.getTime() < Date.now();
                }
            },
            // linkDialog: false,
            // linkValue: ''
        }
    },
    computed: {
       startName(){
           return this.$route.query.appId == 'nng0011' ? '中控启动页详情' : '手机启动页详情'
       }
    },
    watch: {
        // 'detailForm.link'(){
        //     if(this.detailForm.link == '自定义') {  // 防止表单的值出现自定义
        //         this.detailForm.link = '无'
        //     }
        // }
        // 'detailForm.duration'(newVale){
        //     console.log(newVale)
        // }
    },
    created(){
        console.log(this.$route.query)
        // this.detailForm.imgUrl = this.$route.query.imgUrl
        this.detailForm.timeRange.push(this.startTime,this.endTime)
        
    },
    methods: {
        handleRemove(file, fileList) {
            this.detailForm.imgUrl = ''  // 移除图片
            this.hideUpload = fileList.length >= this.limitCount;
        },
        
        imgPreview(file,fileList){
            // this.detailForm.imgUrl = file.url  // 选择图片后，图片的url赋值给detailForm.imgUrl
            this.$refs.imgValidate.clearValidate()  // 清空图片项的验证
            // 上传图片后，隐藏上传组件框
            this.hideUpload = fileList.length >= this.limitCount;
        },
        // 自定义上传图片
        handUpload(a){
            var file = a.file
            let fileDate = new FormData()
            fileDate.append('uploadFile',file)
            upload(fileDate).then(res => {
                console.log(res)
                if(res.resultCode == 1){
                    this.detailForm.imgUrl = res.data.picUrl
                    this.$message.success(res.resultMsg)
                }else{
                    this.$message.error(res.resultMsg)
                }
            })
            .catch(res => {
                this.$message.error('上传失败')
            })
        },
        selectDate(){
            //console.log(this.detailForm.timeRange) // 选择的起始时间
            
        },
        cancelSetting(){
            this.$router.push({ name: 'Start' })
        },
        defineSetting(){
            this.$refs.detailForm.validate( valid => {
                if(valid){
                    var params = {
                        name: this.detailForm.name,
                        image: this.detailForm.imgUrl,
                        description: this.detailForm.describe,
                        url: this.detailForm.link,
                        playSeconds: parseInt(this.detailForm.duration.substring(0,1)),
                        appId: this.$route.query.appId,
                        startTime: new Date(this.detailForm.timeRange[0]).toISOString(),
                        endTime: new Date(this.detailForm.timeRange[1]).toISOString()
                    }
                    editStartup(params, this.startupId).then(res => {
                        if(res.resultCode == 1){
                            this.$message.success(res.resultMsg)
                            this.$router.go(-1)
                        }else{
                            this.$message.warning(res.resultMsg)
                        }
                    })
                }else{
                    console.log('error submit')
                    return false
                }
            })
        },
        // 自定义跳转链接
        // custom(value){
        //     if(value == '自定义'){
        //         this.linkDialog = true
        //     }
        // },
        // 确认修改时把link值赋值给表单的link
        // defineLinkDialog(){
        //     this.linkDialog = false
        //     if(this.linkValue){
        //         this.detailForm.link = this.linkValue
        //     }
        // }
    }
}
</script>

<style lang="scss" scoped>
.start-detail{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 20;
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        .detail-header{
            display: flex;
            justify-content: space-between;
            margin-bottom: 22px;
            p{
                font-weight: bold;
            }
        }
        .detail-form{
            padding-top: 26px;
            .el-form{
                display: flex;
                .form-left{
                    flex: 2;
                    .btnGrounp{
                        margin-top: 80px;
                        margin-bottom: 0px;
                    }
                }
                .form-right{
                    flex: 1;
                    // .upload{
                    //      margin: 0 auto;
                    //      height: 350px;
                    // }
                    // .size{
                    //     position: absolute;
                    //     bottom: 0;
                    //     left: 50%;
                    //     transform: translateX(-50%);
                    // }
                }
            }
            .line{
                text-align: center;
            }
            .detail-btn{
                width: 150px;
                margin-right: 100px;
            }
            .avatar{
                // width: 100%;
                height: 100%;
            }
        }
    }
}

</style>

